<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>详情</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in userList" :key="item.id">
                    <td>{{ index+1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender }}</td>
                    <td><a @click.prevent="toInfo(item.id)" >详情</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import router from '@/router';
// import { useRoute,useRouter } from 'vue-router';
export default{
data(){
    return{
        
 userList : [
    {
        id: 1,
        name: "zhangsan",
        age: 22,
        gender: "男"
    },
    {
        id: 2,
        name: "lisi",
        age: 23,
        gender: "男"
    },
    {
        id: 3,
        name: "wangwu",
        age: 25,
        gender: "女"
    },
]

    }
},
methods:{
    toInfo:function (id){
    this.$router.push(`/home/userInfo/${id}`)
}
}
}
</script>
<style></style>